// 1. 导入走马灯组件
import { Swiper } from 'antd-mobile'
// 导入模块化的样式
import styles from './css/MySwiper.module.css'

function MySwiper(props) {
  return (
    <div>
      {/* 走马灯的容器 */}
      <Swiper
        loop
        autoplay
        autoplayInterval={1000}
      >
        {/* 把 props 动态传递进来的 dt 轮播图数据，循环渲染为轮播图 Item 项 */}
        {props.dt.map((item, index) => (
          <Swiper.Item key={index}>
            <img
              className={styles.img}
              src={item.src}
              alt=""
            />
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  )
}

export default MySwiper
